<template lang="pug">
.container
  page-head(title="Page Head" sub-title="Subtitle")
    template(#append)
      span(style="color: red;") 这是附加内容
    n-button(type="primary") 新增
    popover-icon(icon="file-word" text="这是一个提示" @click="ev_cancel")
  .main
    n-upload(:default-upload="false" @change="ev_fieldChange")
      n-button 上传
    .content(v-html="content")

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {createWorker} from 'tesseract.js'; //【法二】js单线程引入这个（这个识别速度慢）
import type { UploadInst, UploadFileInfo } from 'naive-ui'

let content = ref('')

const ev_fieldChange = (options: { fileList: UploadFileInfo[] }) =>  {
  console.log(options.fileList[0])
  workerTesseract(options.fileList[0].file)
}
const workerTesseract = async (img: any) => {
  const worker = await createWorker('chi_sim', 1, {
    workerPath: 'node_modules/tesseract.js/dist/worker.min.js',
    langPath: 'src/assets/lang-data',
    corePath: 'node_modules/tesseract.js-core/tesseract-core.wasm.js',
    logger: (m: any) => console.log(m),
  });
  await worker.load();
  const res = await worker.recognize(img);
  content.value = res.data.text
  await worker.terminate();
}

const ev_cancel = () => {
  console.log('点击了返回')
}

onMounted( () => {
  // workerTesseract()
})

</script>

<style lang="scss" scoped>

.content {
  white-space: pre-line;
}

</style>